﻿ /**
 * @Description: the styles of ZUK手机官网-公共部分
 * @Authors    : pengml1@zuk.com
 * @Date       : 2016-07-15
 * @Version    : 1.0
 */
.index-section .section-head .more,.banner-wrap .bx-controls-direction a{ background-image: url(../Images/home_new_icon.png);}

body{ background-color: #fff;}
.wrapper{width: 1200px; margin: 0 auto;}  
.index-section{ margin-top: 40px;}
.index-section .section-head{ position: relative;}
.index-section .section-head .title{ font-size: 18px; line-height: 36px; font-weight: 100;}
.index-section .section-head .more{ position: absolute; top: 11px; right: 2px; padding-right: 24px; line-height: 20px; background-repeat: no-repeat; background-position: right -107px;}
.index-section .top-adv-box{ position: absolute; top: -596px; left: 155px; width: 240px; height: 86px; overflow: hidden; z-index: 20;}
.index-section .top-adv-box img{ vertical-align: top;}
.index-ad1{ margin-top: 25px; height: 120px; overflow: hidden;}

.product-wrap{ position: relative; margin-top: 15px; padding-left: 240px; overflow: hidden;}
.product-wrap .left-img-wrap{ position: absolute; top: 0; left: 0; width: 240px; height: 600px;}
.product-list1-wrap{ width: 958px; border: 1px solid #f0f0f0; overflow: hidden;}
.product-list1-wrap .product-list{ position: relative; width: 960px;}

.product-wrap1{ padding: 0;}
.product-wrap1 .product-list{ position: relative; width: 1200px;}
.product-wrap1 .product-list li{ border-bottom: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;}
.product-wrap1 .cols{ margin-top: 30px;}
.product-wrap1 .product-list .bd-l{ border-left: 1px solid #f0f0f0; width: 239px;}
.product-wrap1 .product-list .bd-r{ border-right: 1px solid #f0f0f0; width: 239px;}


.index-ad2{ margin-top: 50px;}

.pj-section .section-head .title{ float: left;}
.sub-head{ float: left; margin-left: 35px; line-height: 36px; font-size: 14px;}
.sub-head a{ margin-right: 35px;}

.banner-wrap{ height: 468px; position: relative; overflow: hidden;}
.banner-wrap .bx-wrapper{ margin-bottom: 0;}
.banner-wrap .bxslider-wrap{ position: absolute; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 468px;}
.banner-wrap .bx-wrapper img{ max-width: 2560px !important; vertical-align: top;}

.banner-wrap .bx-controls{ width: 960px; padding-left: 240px; margin: 0 auto;}
.banner-wrap .bx-pager{ padding: 0; bottom: 20px; width: 960px; z-index: 8;}
.banner-wrap .bx-pager.bx-default-pager a{ width: 7px; height: 7px; border: 1px solid #908f90; border: 1px solid rgba(144,143,144,.8); background: transparent; border-radius: 9px !important; overflow: hidden;}
.banner-wrap .bx-pager.bx-default-pager a.active{ width: 9px; height: 9px; border: 1px solid #1492ed; border-radius: 9px; vertical-align: middle; background: transparent;}
.banner-wrap .bx-pager.bx-default-pager a:hover{ background: transparent;}
.banner-wrap .bx-pager .bx-pager-item, .banner-wrap .bx-controls-auto .bx-controls-auto-item{ vertical-align: middle;}
.banner-wrap .bx-controls-direction{ position: relative;}
.banner-wrap .bx-controls-direction a{ top: -270px; margin-top: 0; width: 30px; height: 60px; background-repeat:  no-repeat; z-index: 6;}
.banner-wrap .bx-controls-direction .bx-prev{ background-position: 0 0; left: 0;}
.banner-wrap .bx-controls-direction .bx-next{ background-position: -40px 0; right: 0;}
.banner-wrap .bx-controls-direction .bx-prev:hover{ background-position: 0 -70px;}
.banner-wrap .bx-controls-direction .bx-next:hover{ background-position: -40px -70px;}
.bxslider-wrap .bxslider li{ background-position: top center; background-repeat: no-repeat;}
.bxslider-wrap .bxslider li .wrapper{ position: absolute; top: 0; left: 50%; margin-left: -600px; width: 1200px; height: 100%;}
.bxslider-wrap .bxslider li .wrapper a{ position: absolute; z-index: 8; background: #fff; opacity: 0; filter:alpha(opacity=0)}


.category-wrapper{position: relative; z-index: 9;}
.category-wrap{ position: absolute; top: 0; left: 0; height: 468px; width: 240px;}
/*:root .category-wrap{ filter: none;}*/
.banner-wrap .bx-viewport{ border: 0 none;}

.category-list{ padding-top: 30px; height: 438px; width: 240px; filter:progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="#CC292929", endColorstr="#CC292929");
background-color:rgba(41,41,41,0.8); z-index: 9;}
:root .category-list{ filter: none;}
.category-list li .category{ position: relative; display: block; padding-left: 23px; height: 60px; line-height: 60px; font-size: 16px; color: #fff; -webkit-transition:background-color .1s linear; transition:background-color .1s linear; z-index: 9;}
.sub-category-wrap{ display: none; position: absolute; top: -1px; left: 240px; height: 468px;  z-index: 8;}
.sub-category-inner{  background-color: #fff; border: 1px solid #e6e6e6; height: 467px; border-left: 0 none; box-shadow: 0 1px 3px rgba(0,0,0,.1);}
.sub-category-list{ float: left; height: 466px; overflow: hidden; position: relative; margin-top: -1px;}
.sub-category-list li{ height: 50px; line-height: 50px; width: 230px; padding: 14px 20px 14px 30px; overflow: hidden;}
.sub-category-list li img{ margin-right: 11px; vertical-align: middle;}
.sub-category-list li a{ display: inline-block;}
.sub-adv-box{ float: left; width: 250px; height: 466px; overflow: hidden;}

.has-nav-layer .category{ background-color: #fff; color: #121212 !important;}
.has-nav-layer .sub-category-wrap{ display: block;}

.h-hot-ico,.h-new-ico,.h-yus-ico,.h-zhij-ico,.h-zp-ico,.h-sall01{ position: absolute; top: 15px; right: 40px; width: 40px; height: 40px; background-image: url(../Images/product-mark.png); background-repeat: no-repeat; font-size: 0; text-indent: -999em; overflow: hidden; z-index: 5;}
.h-new-ico{ background-position: 0 -50px;}
.h-yus-ico{ background-position: 0 -150px;}
.h-zhij-ico{ background-position: 0 -100px;}
.h-zp-ico{ background-position: 0 -200px;}
.h-sall01{ background-position: 0 -250px;}



/* product-list css*/
.product-sort{ margin-top: 18px; font-size: 14px; line-height: 34px;}
.product-sort span{ margin-right: 38px; color: #999;}
.product-sort a{ margin-right: 47px;}
.product-sort a.cur{ color: #1499f8;}

.list-wrap{ margin-top: 18px;}
.list-wrap .product-list li{ width: 300px; padding-top: 40px; height: 300px;}
.list-wrap .product-list li .h-hot-ico,.list-wrap .product-list li .h-new-ico,.list-wrap .product-list li .h-yus-ico,.list-wrap .product-list li .h-zhij-ico,.list-wrap .product-list li .h-zp-ico,.list-wrap .product-list li .h-sall01,.list-wrap .product-list li .h-sall02,.list-wrap .product-list li .h-sall03,.list-wrap .product-list li .h-sall04,.list-wrap .product-list li .h-sall05,.list-wrap .product-list li .h-sall06,.list-wrap .product-list li .h-sall07,.list-wrap .product-list li .h-sall08,.list-wrap .product-list li .h-sall09{ top: 40px; right: 70px;}

@media screen and (-webkit-min-device-pixel-ratio:2.0),screen and (-moz-min-device-pixel-ratio:2),screen and (min-moz-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2.0) {
	.bxslider-wrap .bxslider li{ -webkit-background-size: 2560px 468px; background-size: 2560px 468px;}
	.h-hot-ico,.h-new-ico,.h-yus-ico,.h-zhij-ico,.h-zp-ico,.h-sall01,.h-sall02,.h-sall03,.h-sall04,.h-sall05,.h-sall06,.h-sall07,.h-sall08,.h-sall09{ background-image: url(../Images/product-mark@2x.png); -webkit-background-size: 95px 350px;
	background-size: 95px 350px;}
	.index-section .section-head .more,.banner-wrap .bx-controls-direction a{ background-image: url(../Images/home_new_icon@2x.png); -webkit-background-size: 200px 130px; background-size: 200px 130px;}
	
}

.index-pro{ position: absolute; top: 0; left: -200px; z-index: -1;}
